<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>KUI - Icon</title>
<link rel="stylesheet/less" type="text/css" href="../src/less/index.less" />
<script src="js/less.min.js" type="text/javascript"></script>
<script src="../lib/zepto.min.js"></script>
<style>
.demo-icon{font-family:"kui-icon",'kui-icon-ext';font-weight:normal;font-style:normal;margin-left:0.5rem;display:inline-block;width:1.2rem;font-size:1rem;}
.demo-icon:before,.i-code{display:none;}


.icon-boxes{-webkit-user-select:auto;user-select:auto;padding:0.5rem 0;}
.icon-boxes .the-icons{width:50%;float:left; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
</style>
</head>

<body ontouchstart>
	<div class="kui-page">
	<div class="kui-header">
		<div class="pull-left icon-left app-back" onClick="history.back()">返回</div>
		<h1 class="kui-title">Icon</h1>
	</div>
	<div class="kui-content">
		<div class="kui-block-title"><strong>系统图标</strong><span class="kui-btn-default kui-btn-s" onClick="$('.i-name,.i-code').toggle();">code</span></div>
		<div class="kui-blocker icon-boxes">
			<div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-ok">&#xe800;</i> <span class="i-name">icon-ok</span><span class="i-code">0xe800</span></div>
			<div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-yes">&#xe801;</i> <span class="i-name">icon-yes</span><span class="i-code">0xe801</span></div>
			<div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-info">&#xe802;</i> <span class="i-name">icon-info</span><span class="i-code">0xe802</span></div>
			<div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-attention">&#xe803;</i> <span class="i-name">icon-attention</span><span class="i-code">0xe803</span></div>
			<div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-check">&#xe804;</i> <span class="i-name">icon-check</span><span class="i-code">0xe804</span></div>
			<div title="Code: 0xf096" class="the-icons span3"><i class="demo-icon icon-check-empty">&#xf096;</i> <span class="i-name">icon-check-empty</span><span class="i-code">0xf096</span></div>
			<div title="Code: 0xe805" class="the-icons span3"><i class="demo-icon icon-search">&#xe805;</i> <span class="i-name">icon-search</span><span class="i-code">0xe805</span></div>
			<div title="Code: 0xe806" class="the-icons span3"><i class="demo-icon icon-down">&#xe806;</i> <span class="i-name">icon-down</span><span class="i-code">0xe806</span></div>
			<div title="Code: 0xe807" class="the-icons span3"><i class="demo-icon icon-left">&#xe807;</i> <span class="i-name">icon-left</span><span class="i-code">0xe807</span></div>
			<div title="Code: 0xe808" class="the-icons span3"><i class="demo-icon icon-right">&#xe808;</i> <span class="i-name">icon-right</span><span class="i-code">0xe808</span></div>
			<div title="Code: 0xe809" class="the-icons span3"><i class="demo-icon icon-up">&#xe809;</i> <span class="i-name">icon-up</span><span class="i-code">0xe809</span></div>
			<div title="Code: 0xe80a" class="the-icons span3"><i class="demo-icon icon-cancel">&#xe80a;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe80a</span></div>
			<div title="Code: 0xe80e" class="the-icons span3"><i class="demo-icon icon-dot">&#xe80e;</i> <span class="i-name">icon-dot</span><span class="i-code">0xe80e</span></div>
			<div title="Code: 0xe80f" class="the-icons span3"><i class="demo-icon icon-dots">&#xe80f;</i> <span class="i-name">icon-dots</span><span class="i-code">0xe80f</span></div>
			<div title="Code: 0xe810" class="the-icons span3"><i class="demo-icon icon-plus">&#xe810;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe810</span></div>
			<div title="Code: 0xe811" class="the-icons span3"><i class="demo-icon icon-minus">&#xe811;</i> <span class="i-name">icon-minus</span><span class="i-code">0xe811</span></div>
			<div title="Code: 0xe812" class="the-icons span3"><i class="demo-icon icon-help">&#xe812;</i> <span class="i-name">icon-help</span><span class="i-code">0xe812</span></div>
			<div title="Code: 0xe838" class="the-icons span3"><i class="demo-icon icon-load animate-spin">&#xe838;</i> <span class="i-name">icon-load</span><span class="i-code">0xe838</span></div>
			<div title="Code: 0xf0c9" class="the-icons span3"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
			<div title="Code: 0xf104" class="the-icons span3"><i class="demo-icon icon-angle-left">&#xf104;</i> <span class="i-name">icon-angle-left</span><span class="i-code">0xf104</span></div>
			<div title="Code: 0xf105" class="the-icons span3"><i class="demo-icon icon-angle-right">&#xf105;</i> <span class="i-name">icon-angle-right</span><span class="i-code">0xf105</span></div>
			<div title="Code: 0xf106" class="the-icons span3"><i class="demo-icon icon-angle-up">&#xf106;</i> <span class="i-name">icon-angle-up</span><span class="i-code">0xf106</span></div>
			<div title="Code: 0xf107" class="the-icons span3"><i class="demo-icon icon-angle-down">&#xf107;</i> <span class="i-name">icon-angle-down</span><span class="i-code">0xf107</span></div>
			<div title="Code: 0xf10c" class="the-icons span3"><i class="demo-icon icon-circle">&#xf1db;</i> <span class="i-name">icon-circle</span><span class="i-code">0xf1db</span></div>
			<div title="Code: 0xf192" class="the-icons span3"><i class="demo-icon icon-dot-circled">&#xf192;</i> <span class="i-name">icon-dot-circled</span><span class="i-code">0xf192</span></div>
			<div class="cl"></div>
		</div>
		<div class="kui-block-title"><strong>扩展图标</strong><span class="kui-btn-default kui-btn-s" onClick="$('.i-name,.i-code').toggle();">code</span></div>
		<div class="kui-blocker icon-boxes">
			<p class="Mlr"><small>默认扩展图标不会打包到基础包中，用户可单独引入。</small></p>
			<div title="Code: 0xf914" class="the-icons span3"><i class="demo-icon icon-heart">&#xf914;</i> <span class="i-name">icon-heart</span><span class="i-code">0xf914</span></div>
			<div title="Code: 0xf915" class="the-icons span3"><i class="demo-icon icon-heart-empty">&#xf915;</i> <span class="i-name">icon-heart-empty</span><span class="i-code">0xf915</span></div>
			<div title="Code: 0xf916" class="the-icons span3"><i class="demo-icon icon-star">&#xf916;</i> <span class="i-name">icon-star</span><span class="i-code">0xf916</span></div>
			<div title="Code: 0xf917" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xf917;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xf917</span></div>
			<div title="Code: 0xf918" class="the-icons span3"><i class="demo-icon icon-user">&#xf918;</i> <span class="i-name">icon-user</span><span class="i-code">0xf918</span></div>
			<div title="Code: 0xf919" class="the-icons span3"><i class="demo-icon icon-user-plus">&#xf919;</i> <span class="i-name">icon-user-plus</span><span class="i-code">0xf919</span></div>
			<div title="Code: 0xf91a" class="the-icons span3"><i class="demo-icon icon-user-times">&#xf91a;</i> <span class="i-name">icon-user-times</span><span class="i-code">0xf91a</span></div>
			<div title="Code: 0xf91b" class="the-icons span3"><i class="demo-icon icon-users">&#xf91b;</i> <span class="i-name">icon-users</span><span class="i-code">0xf91b</span></div>
			<div title="Code: 0xf91c" class="the-icons span3"><i class="demo-icon icon-male">&#xf91c;</i> <span class="i-name">icon-male</span><span class="i-code">0xf91c</span></div>
			<div title="Code: 0xf91d" class="the-icons span3"><i class="demo-icon icon-female">&#xf91d;</i> <span class="i-name">icon-female</span><span class="i-code">0xf91d</span></div>
			<div title="Code: 0xf91e" class="the-icons span3"><i class="demo-icon icon-picture">&#xf91e;</i> <span class="i-name">icon-picture</span><span class="i-code">0xf91e</span></div>
			<div title="Code: 0xf91f" class="the-icons span3"><i class="demo-icon icon-th-large">&#xf91f;</i> <span class="i-name">icon-th-large</span><span class="i-code">0xf91f</span></div>
			<div title="Code: 0xf920" class="the-icons span3"><i class="demo-icon icon-th">&#xf920;</i> <span class="i-name">icon-th</span><span class="i-code">0xf920</span></div>
			<div title="Code: 0xf921" class="the-icons span3"><i class="demo-icon icon-th-list">&#xf921;</i> <span class="i-name">icon-th-list</span><span class="i-code">0xf921</span></div>
			<div title="Code: 0xf922" class="the-icons span3"><i class="demo-icon icon-mail-alt">&#xf922;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf922</span></div>
			<div title="Code: 0xf923" class="the-icons span3"><i class="demo-icon icon-home">&#xf923;</i> <span class="i-name">icon-home</span><span class="i-code">0xf923</span></div>
			<div title="Code: 0xf924" class="the-icons span3"><i class="demo-icon icon-qrcode">&#xf924;</i> <span class="i-name">icon-qrcode</span><span class="i-code">0xf924</span></div>
			<div title="Code: 0xf925" class="the-icons span3"><i class="demo-icon icon-off">&#xf925;</i> <span class="i-name">icon-off</span><span class="i-code">0xf925</span></div>
			<div title="Code: 0xf926" class="the-icons span3"><i class="demo-icon icon-yen">&#xf926;</i> <span class="i-name">icon-yen</span><span class="i-code">0xf926</span></div>
			<div title="Code: 0xf927" class="the-icons span3"><i class="demo-icon icon-basket">&#xf927;</i> <span class="i-name">icon-basket</span><span class="i-code">0xf927</span></div>
			<div title="Code: 0xf928" class="the-icons span3"><i class="demo-icon icon-cart-plus">&#xf928;</i> <span class="i-name">icon-cart-plus</span><span class="i-code">0xf928</span></div>
			<div title="Code: 0xf929" class="the-icons span3"><i class="demo-icon icon-chart-bar">&#xf929;</i> <span class="i-name">icon-chart-bar</span><span class="i-code">0xf929</span></div>
			<div title="Code: 0xf92a" class="the-icons span3"><i class="demo-icon icon-chart-line">&#xf92a;</i> <span class="i-name">icon-chart-line</span><span class="i-code">0xf92a</span></div>
			<div title="Code: 0xf92b" class="the-icons span3"><i class="demo-icon icon-chart-pie">&#xf92b;</i> <span class="i-name">icon-chart-pie</span><span class="i-code">0xf92b</span></div>
			<div title="Code: 0xf92c" class="the-icons span3"><i class="demo-icon icon-whatsapp">&#xf92c;</i> <span class="i-name">icon-whatsapp</span><span class="i-code">0xf92c</span></div>
			<div title="Code: 0xf92d" class="the-icons span3"><i class="demo-icon icon-comment">&#xf92d;</i> <span class="i-name">icon-comment</span><span class="i-code">0xf92d</span></div>
			<div title="Code: 0xf92e" class="the-icons span3"><i class="demo-icon icon-chat">&#xf92e;</i> <span class="i-name">icon-chat</span><span class="i-code">0xf92e</span></div>
			<div title="Code: 0xf92f" class="the-icons span3"><i class="demo-icon icon-paper-plane">&#xf92f;</i> <span class="i-name">icon-paper-plane</span><span class="i-code">0xf92f</span></div>
			<div title="Code: 0xf930" class="the-icons span3"><i class="demo-icon icon-wechat">&#xf930;</i> <span class="i-name">icon-wechat</span><span class="i-code">0xf930</span></div>
			<div title="Code: 0xf931" class="the-icons span3"><i class="demo-icon icon-qq">&#xf931;</i> <span class="i-name">icon-qq</span><span class="i-code">0xf931</span></div>
			<div title="Code: 0xf932" class="the-icons span3"><i class="demo-icon icon-address-card">&#xf932;</i> <span class="i-name">icon-address-card</span><span class="i-code">0xf932</span></div>
			<div title="Code: 0xf933" class="the-icons span3"><i class="demo-icon icon-thumbs-up">&#xf933;</i> <span class="i-name">icon-thumbs-up</span><span class="i-code">0xf933</span></div>
			<div title="Code: 0xf934" class="the-icons span3"><i class="demo-icon icon-thumbs-down-alt">&#xf934;</i> <span class="i-name">icon-thumbs-down-alt</span><span class="i-code">0xf934</span></div>
			<div title="Code: 0xf935" class="the-icons span3"><i class="demo-icon icon-calendar">&#xf935;</i> <span class="i-name">icon-calendar</span><span class="i-code">0xf935</span></div>
			<div title="Code: 0xf936" class="the-icons span3"><i class="demo-icon icon-login">&#xf936;</i> <span class="i-name">icon-login</span><span class="i-code">0xf936</span></div>
			<div title="Code: 0xf937" class="the-icons span3"><i class="demo-icon icon-logout">&#xf937;</i> <span class="i-name">icon-logout</span><span class="i-code">0xf937</span></div>
			<div title="Code: 0xf938" class="the-icons span3"><i class="demo-icon icon-phone">&#xf938;</i> <span class="i-name">icon-phone</span><span class="i-code">0xf938</span></div>
			<div title="Code: 0xf939" class="the-icons span3"><i class="demo-icon icon-cog">&#xf939;</i> <span class="i-name">icon-cog</span><span class="i-code">0xf939</span></div>
			<div title="Code: 0xf93a" class="the-icons span3"><i class="demo-icon icon-sliders">&#xf93a;</i> <span class="i-name">icon-sliders</span><span class="i-code">0xf93a</span></div>
			<div title="Code: 0xf93b" class="the-icons span3"><i class="demo-icon icon-commenting">&#xf93b;</i> <span class="i-name">icon-commenting</span><span class="i-code">0xf93b</span></div>
			<div title="Code: 0xf93c" class="the-icons span3"><i class="demo-icon icon-share">&#xf93c;</i> <span class="i-name">icon-share</span><span class="i-code">0xf93c</span></div>
			<div title="Code: 0xf93d" class="the-icons span3"><i class="demo-icon icon-ellipsis-vert">&#xf93d;</i> <span class="i-name">icon-ellipsis-vert</span><span class="i-code">0xf93d</span></div>
			<div title="Code: 0xf93e" class="the-icons span3"><i class="demo-icon icon-mobile">&#xf93e;</i> <span class="i-name">icon-mobile</span><span class="i-code">0xf93e</span></div>
			<div title="Code: 0xf93f" class="the-icons span3"><i class="demo-icon icon-monitor">&#xf93f;</i> <span class="i-name">icon-monitor</span><span class="i-code">0xf93f</span></div>
			<div title="Code: 0xf940" class="the-icons span3"><i class="demo-icon icon-credit-card-alt">&#xf940;</i> <span class="i-name">icon-credit-card-alt</span><span class="i-code">0xf940</span></div>
			<div title="Code: 0xf941" class="the-icons span3"><i class="demo-icon icon-location">&#xf941;</i> <span class="i-name">icon-location</span><span class="i-code">0xf941</span></div>
			<div title="Code: 0xf942" class="the-icons span3"><i class="demo-icon icon-direction">&#xf942;</i> <span class="i-name">icon-direction</span><span class="i-code">0xf942</span></div>
			<div title="Code: 0xf943" class="the-icons span3"><i class="demo-icon icon-user-circle">&#xf943;</i> <span class="i-name">icon-user-circle</span><span class="i-code">0xf943</span></div>
			<div title="Code: 0xf944" class="the-icons span3"><i class="demo-icon icon-videocam">&#xf944;</i> <span class="i-name">icon-videocam</span><span class="i-code">0xf944</span></div>
			<div title="Code: 0xf945" class="the-icons span3"><i class="demo-icon icon-leaf">&#xf945;</i> <span class="i-name">icon-leaf</span><span class="i-code">0xf945</span></div>
			<div title="Code: 0xf946" class="the-icons span3"><i class="demo-icon icon-map">&#xf946;</i> <span class="i-name">icon-map</span><span class="i-code">0xf946</span></div>
			<div title="Code: 0xf947" class="the-icons span3"><i class="demo-icon icon-aperture-alt">&#xf947;</i> <span class="i-name">icon-aperture-alt</span><span class="i-code">0xf947</span></div>
			<div title="Code: 0xf948" class="the-icons span3"><i class="demo-icon icon-award">&#xf948;</i> <span class="i-name">icon-award</span><span class="i-code">0xf948</span></div>
			<div title="Code: 0xf949" class="the-icons span3"><i class="demo-icon icon-flag">&#xf949;</i> <span class="i-name">icon-flag</span><span class="i-code">0xf949</span></div>
			<div title="Code: 0xf94a" class="the-icons span3"><i class="demo-icon icon-gift">&#xf94a;</i> <span class="i-name">icon-gift</span><span class="i-code">0xf94a</span></div>
			<div title="Code: 0xf94b" class="the-icons span3"><i class="demo-icon icon-fire">&#xf94b;</i> <span class="i-name">icon-fire</span><span class="i-code">0xf94b</span></div>
			<div title="Code: 0xf94c" class="the-icons span3"><i class="demo-icon icon-bell-alt">&#xf94c;</i> <span class="i-name">icon-bell-alt</span><span class="i-code">0xf94c</span></div>
			<div title="Code: 0xf94d" class="the-icons span3"><i class="demo-icon icon-edit">&#xf94d;</i> <span class="i-name">icon-edit</span><span class="i-code">0xf94d</span></div>
			<div title="Code: 0xf94e" class="the-icons span3"><i class="demo-icon icon-download">&#xf94e;</i> <span class="i-name">icon-download</span><span class="i-code">0xf94e</span></div>
			<div title="Code: 0xf94f" class="the-icons span3"><i class="demo-icon icon-upload">&#xf94f;</i> <span class="i-name">icon-upload</span><span class="i-code">0xf94f</span></div>
			<div title="Code: 0xf950" class="the-icons span3"><i class="demo-icon icon-list-alt">&#xf950;</i> <span class="i-name">icon-list-alt</span><span class="i-code">0xf950</span></div>
			<div title="Code: 0xf951" class="the-icons span3"><i class="demo-icon icon-feather">&#xf951;</i> <span class="i-name">icon-feather</span><span class="i-code">0xf951</span></div>
			<div title="Code: 0xf952" class="the-icons span3"><i class="demo-icon icon-commenting-o">&#xf952;</i> <span class="i-name">icon-commenting-o</span><span class="i-code">0xf952</span></div>
			<div title="Code: 0xf953" class="the-icons span3"><i class="demo-icon icon-camera">&#xf953;</i> <span class="i-name">icon-camera</span><span class="i-code">0xf953</span></div>
			<div title="Code: 0xf954" class="the-icons span3"><i class="demo-icon icon-filter">&#xf954;</i> <span class="i-name">icon-filter</span><span class="i-code">0xf954</span></div>
			<div title="Code: 0xf955" class="the-icons span3"><i class="demo-icon icon-archive">&#xf955;</i> <span class="i-name">icon-archive</span><span class="i-code">0xf955</span></div>
			<div title="Code: 0xf956" class="the-icons span3"><i class="demo-icon icon-trash">&#xf956;</i> <span class="i-name">icon-trash</span><span class="i-code">0xf956</span></div>
			<div title="Code: 0xf957" class="the-icons span3"><i class="demo-icon icon-box">&#xf957;</i> <span class="i-name">icon-box</span><span class="i-code">0xf957</span></div>
		<div class="cl"></div>
		</div>
	</div>
</div>
</body>
</html>
